<template>
    <div class="box">
        <div class="swiper" @scroll="scroll">
            <div v-for="(item,index) in 10" class="swiper-item" :key="index">
            {{ index }}
            </div>
        </div>
    </div>
</template>

<script setup>
import { nextTick } from 'vue';
let arr = [];
// 是否曝光了
let isExpose = {}
function exposure(index){
    console.log(`曝光了第${index}个`);
}

const checkVisibleArea = () => {
    const windowWidth = window.innerWidth;
    console.log(windowWidth,'屏幕的宽度');
    arr.forEach((item,index)=>{
        console.log(item.getBoundingClientRect().left,'离左边的距离');
        console.log(item.clientWidth,'自身的宽度');
        const selfWidth = item.clientWidth;
        const distance = item.getBoundingClientRect().left;
        if( windowWidth >distance +selfWidth/2 && !isExpose[index]){
                exposure(index);
                isExpose[index] = true;
        }
    })
}

nextTick(()=>{
    arr = Array.from(document.querySelectorAll('.swiper-item'));
    checkVisibleArea();
})

const scroll =  () => {
    console.log(111);
    checkVisibleArea();
}
</script>

<style scoped>
.box{
    width: 100%;
    height: 100%;
    background: skyblue;
}

.swiper{
    height: 40%;
    width: 100%;
    display: flex;
    background: greenyellow;
    overflow-x: auto;
}

.swiper-item{
    width: 50%;
    height: 100%;
    margin-left:20px;
    background: red;
    flex-shrink: 0;
    color:white;
    font-size: 20px;
    font-weight: 600;
    display: flex;
    justify-content: center;
    align-items: center;
}
</style>